<template>
  <div class="w-[1150px] p-6 print-style relative bg-white h-full">
    <div class="flex justify-center w-full text-center relative">
      <div class="text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
    </div>
    <div class="text-center text-[22px] font-bold">{{ tableData[0]?.wardName }} {{ printTypeEnum[printType] }} 日期</div>
    <div v-for="(item, index) in tableData" :key="index" class="flex-1 mt-5">
      <div class="flex justify-between items-center mb-4">
        <div class="w-1/3">
          <div>床位: {{ item.lastBedCode }}</div>
          <div class="">诊断：{{ item.zd }}</div>
        </div>
        <div class="flex-1">
          <div class="">
            <span class="mr-4">{{ item.brName }}</span>
            <span class="">{{ item.brXb }} {{ item.brAge }} </span>
          </div>
          <div>&nbsp;</div>
        </div>
        <div class="w-1/5">
          <div class="">住院号：{{ item.zyh }}</div>
          <div>部位：{{ item.bw }}</div>
        </div>
        <BaseBarcode :key="item.zyh" :value="item.zyh" />
      </div>
      <!-- 1:注射本  -->
      <template v-if="printType === '1'">
        <div class="print-table">
          <div class="flex w-full">
            <div class="print-table-item flex-1">医嘱给药名称</div>
            <div class="print-table-item w-[200px]">嘱托</div>
            <div class="print-table-item w-[130px]">执行时间</div>
            <div class="print-table-item w-[100px]">执行护士</div>
          </div>
          <div v-for="(itemRow, indexRow) in getChildList(item.list)" :key="indexRow" class="w-full flex">
            <div class="print-table-item flex-1 flex items-center">
              <div v-if="itemRow.length > 1" class="link-border-print"></div>
              <div>
                <div v-for="row in itemRow" :key="row.yzmc">
                  {{ row.yzmc }}
                </div>
              </div>
            </div>
            <div class="print-table-item w-[200px]">{{ itemRow[0].zt || '-' }}</div>
            <div class="print-table-item w-[130px]">{{ itemRow[0].hdsj || '-' }}</div>
            <div class="print-table-item w-[100px]">{{ itemRow[0].hdhs || '-' }}</div>
          </div>
        </div>
      </template>
      <!-- 2：治疗本 -->
      <template v-else-if="printType === '2'">
        <div class="print-table">
          <div class="flex w-full">
            <div class="print-table-item flex-1">医嘱给药名称</div>
            <div class="print-table-item w-[200px]">嘱托</div>
            <div class="print-table-item w-[130px]">执行时间</div>
            <div class="print-table-item w-[100px]">执行护士</div>
          </div>
          <div v-for="(itemRow, indexRow) in item.list" :key="indexRow" class="flex w-full">
            <div class="print-table-item flex-1">{{ itemRow.yzmc }}</div>
            <div class="print-table-item w-[200px]">{{ itemRow.zt || '-' }}</div>
            <div class="print-table-item w-[130px]">{{ itemRow.hdsj || '-' }}</div>
            <div class="print-table-item w-[100px]">{{ itemRow.hdhs || '-' }}</div>
          </div>
        </div>
      </template>
      <!-- 3：口服本 -->
      <template v-else-if="printType === '3'">
        <div class="print-table">
          <div class="flex w-full">
            <div class="print-table-item flex-1">医嘱给药名称</div>
            <div class="print-table-item w-[200px]">嘱托</div>
            <div class="print-table-item w-[130px]">早</div>
            <div class="print-table-item w-[100px]">中</div>
            <div class="print-table-item w-[100px]">晚</div>
            <div class="print-table-item w-[100px]">睡前</div>
          </div>
          <div v-for="(itemRow, indexRow) in item.list" :key="indexRow" class="flex w-full">
            <div class="print-table-item flex-1">{{ itemRow.yzmc }}</div>
            <div class="print-table-item w-[200px]">{{ itemRow.zt || '-' }}</div>
            <div class="print-table-item w-[130px]">{{ itemRow.morning || '-' }}</div>
            <div class="print-table-item w-[100px]">{{ itemRow.noon || '-' }}</div>
            <div class="print-table-item w-[100px]">{{ itemRow.night || '-' }}</div>
            <div class="print-table-item w-[100px]">{{ itemRow.bedtime || '-' }}</div>
          </div>
        </div>
      </template>
      <!-- 3：滴眼液本 -->
      <template v-else-if="printType === '4'">
        <div v-for="(itemRow, indexRow) in item.list" :key="indexRow" class="mt-2">
          <div class="border-b w-full">{{ itemRow.yzmc }}</div>
          <div class="flex flex-wrap">
            <div v-for="itemTime in timeDetails" :key="itemTime.id" class="mx-2">{{ itemTime.time }}</div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex justify-between mt-5">
      <div class="w-[250px]"></div>
      <div>核对护士：{{ empName }}</div>
      <div class="w-[250px]">核对时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { groupBy } from 'lodash-es'
import { getSystemConfig } from '@/utils/systemConfig'
import useUserStore from '@/store/user'

const { empName } = useUserStore()

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  },
  printType: {
    type: String,
    desc: '1:注射本,2:治疗本,3:口服本,4:滴眼液本',
    default: '1'
  }
})

const tableData = ref([])
const timeDetails = ref([])
const printTypeEnum = {
  1: '注射治疗执行单',
  2: '治疗执行单',
  3: '口服药治疗执行单',
  4: '滴眼液本'
}
watch(
  () => props.printData,
  (val) => {
    // 使用 reduce 方法来分组对象
    timeDetails.value = val.printData.timeDetails
    tableData.value = val.printData.detail.reduce((acc, item) => {
      const barcode = item.barcode
      // 检查累加器中是否已经有这个barcode的条目
      if (!acc.some((group) => group.barcode === barcode)) {
        // 如果没有，则创建一个新的条目
        acc.push({
          ...item,
          list: []
        })
      }
      // 找到对应的barcode条目，并向其list中添加yzmc和rq
      const group = acc.find((g) => g.barcode === barcode)
      group.list.push({ ...item })
      return acc
    }, [])
  }
)
const getChildList = (list) => {
  const res = groupBy(list, 'fid')
  const data = Object.values(res)
  return data
}
</script>
<style lang="less" scoped>
.border-b {
  border-bottom: 1px solid #000000;
}
.link-border-print {
  width: 8px;
  height: 75%;
  margin: 0 5px;
  border: 2px solid #000000;
  border-right: none;
}
.table-header {
  background: #eee;
  -webkit-print-color-adjust: exact;
}
// @media print {
//   @page {
//     size: A4;
//     margin: 1in;
//   }
// }
</style>
